<template>
  <div class="loginBox">
    <div class="centerBox">
      <h1>欢迎使用宿舍管理系统</h1>
<!--
  ref：相当于html中的标签的id属性，和Vue3中的ref函数是不同东西
-->
      <el-form ref="loginFormRef" :model="form" :rules="rules">
        <!--prop中的值必须和form表单中的属性名一致，否则在自定义验证规则时会获取不到值-->
        <el-form-item label="" prop="account">
          <el-input v-model="form.account" placeholder="账号"/>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码"/>
        </el-form-item>
        <el-form-item label="" prop="role">
          <el-radio-group v-model="form.role">
            <el-radio label="0" model-value="0" value="0">系统管理员</el-radio>
            <el-radio label="1" model-value="1">宿舍管理员</el-radio>
            <el-radio label="2" model-value="2">学生</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox label="记住密码" v-model="form.rem" name="type"/>
        </el-form-item>

        <el-form-item label="">
          <el-button @click="onLogin" class="loginBtn" type="primary">登录</el-button>
        </el-form-item>
        <el-form-item label="" class="btns">
          <el-button class="item" type="default">注册</el-button>
          <el-button class="item" type="default">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
/*
  rule：当前使用验证规则对象
  value：被验证的数据
  callback：回调函数，
    通过：callback()
    不通过：callback(new Error("错误提示信息"))
 */
const roleCheck = (rule, value, callback) => {
  console.log(rule, value)
  if (["0", "1", "2"].includes(value)) {
    return callback();
  } else {
    return callback(new Error("请选择登录的身份"))
  }
}
export default {
  name: "LoginView",
  data() {
    return {
      form: {
        account: '',
        password: '',
        role: '1',
        rem: true
      },
      rules: {
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 之间', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 之间', trigger: 'blur'},
        ],
        role: [
          {validator: roleCheck, trigger: 'change'},
        ],
      }
    }
  },
  methods: {
    onLogin() {
      // 获取表单，然后再次验证表单
      // console.log(this.$refs.loginFormRef)
      this.$refs.loginFormRef.validate((valid, fields) => {
        // valid：boolean，表示是否通过验证
        if (valid) {
          /**
           * 发起登录请求，由服务器去验证账号密码
           *  服务器验证通过
           *    是否记住密码
           *    跳转页面
           *    其它事情
           *  服务器验证不通过，弹出框提示
           */
          this.$router.push({
            path: '/home'
          })
        }
      })
    }
  }
}
</script>

<!--
  scoped：表示样式只能在该vue文件中使用
-->
<style scoped lang="scss">
.loginBox {
  width: 100%;
  height: 100%;
  background-color: red;
  display: flex; /*弹性盒子*/
  justify-content: center; /*水平居中*/
  align-items: center; //垂直居中
  background-image: url("../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.centerBox {
  width: 500px;
  //height: 500px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  opacity: 0.7;

  h1 {
    text-align: center;
  }

  //样式穿透
  :deep .el-form-item__content {
    justify-content: center;
  }
}

.loginBtn {
  //display: block;
  width: 100%;
}

.btns {
  display: flex;

  .item {
    flex: 1;
  }
}
</style>